<template>
    <div class="paginationBox">
        <el-pagination
            v-model:current-page="data.modelValue"
            :size="data.size"
            :disabled="data.disabled"
            :background="data.background"
            :layout="data.layout"
            :total="data.total"
            :page-size="data.pageSize"
            @current-change="handleCurrentChange"
        />
    </div>
</template>
<script setup lang="ts">
import { reactive } from "vue";
interface Props {
    modelValue?: number; // 当前页码
    size?: string; // 尺寸
    pageSize?: number; // 每页条数
    disabled?: boolean; // 是否禁用
    background?: boolean; // 是否使用背景色
    layout?: string; // 布局
    total?: number; // 数据总数
}
const props = withDefaults(defineProps<Props>(), {
    current: 1,
    size: "default",
    pageSize: 10,
    disabled: false,
    background: false,
    layout: "total, prev, pager, next, jumper",
    total: 0,
});
// 数据
const data = reactive(JSON.parse(JSON.stringify(props)));
// 事件
const emit = defineEmits(["update:modelValue"]);
// 监听器
const handleCurrentChange = (val: number) => {
    emit("update:modelValue", val);
};
</script>
